<template>
	<view class="mons">
		<view class="top">
			<view class="mo">
				<view class="head">
					<image src="../../static/img/3/3-105.png" mode="widthFix"></image>
				</view>
				<view class="name">
					用户名
				</view>
				<view class="box">
					<view class="bs"></view>
					<view class="li">
						<view class="bor">
							<image src="../../static/img/3/3-106.png" mode="widthFix"></image>
							
						</view>
						普通会员
					</view>
					<view class="li actt">
						<view class="bor">
							<image src="../../static/img/3/3-107.png" mode="widthFix"></image>
						</view>
						黄金会员
					</view>
					<view class="li">
						<view class="bor">
							<image src="../../static/img/3/3-108.png" mode="widthFix"></image>
						</view>
						白金会员
					</view>
					<view class="li">
						<view class="bor">
							<image src="../../static/img/3/3-109.png" mode="widthFix"></image>
						</view>
						钻石会员
					</view>
				</view>
				<navigator class="cz" url="/pages/user/jflist">
					<view class="border">
						<view class="h3">
							10000
						</view>
						<view class="ps">
							成长值
						</view>
					</view>
				</navigator>
			</view>
			<image class="bac" src="../../static/img/3/3-44.png" mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="h4">
				我的特权
			</view>
			<view class="live">
				<view class="liven">
					<image src="../../static/img/3/3-114.png" style="width: 72rpx;margin-bottom: 22rpx;margin-top: 47rpx;" mode="widthFix"></image>
					满免运费
				</view>
				<view class="liven">
					<image src="../../static/img/3/3-115.png" style="width: 60rpx;margin-bottom: 22rpx;margin-top: 47rpx;" mode="widthFix"></image>
					签到奖励
				</view>
				<view class="liven">
					<image src="../../static/img/3/3-116.png" style="width: 70rpx;margin-bottom: 23rpx;margin-top: 51rpx;" mode="widthFix"></image>
					评价奖励
				</view>
				<view class="liven">
					<image src="../../static/img/3/3-117.png" style="width: 75rpx;margin-bottom: 19rpx;margin-top: 47rpx;" mode="widthFix"></image>
					专享活动
				</view>
				<view class="liven">
					<image src="../../static/img/3/3-118.png" style="width: 62rpx;margin-bottom: 16rpx;margin-top: 56rpx;" mode="widthFix"></image>
					会员特价
					<image src="../../static/img/3/3-119.png" mode="widthFix" class="clok"></image>
				</view>
				<view class="liven">
					<image src="../../static/img/3/3-121.png" style="width: 81rpx;margin-bottom: 25rpx;margin-top: 56rpx;" mode="widthFix"></image>
					生日礼包
					<image src="../../static/img/3/3-119.png" mode="widthFix" class="clok"></image>
				</view>
			</view>
			<view class="h4">
				我的任务
			</view>
			<view class="list">
				<view  class="li">
					<view class="lef">
						新手欢迎奖励
						<text>积分 +10</text>
					</view>
					<view class="rig">
						<view class="buton">
							领取
						</view>
					</view>
					<view class="both"></view>
				</view>
				<view  class="li">
					<view class="lef">
						设置头像
						<text>积分 +10</text>
					</view>
					<view class="rig">
						<view class="buton bun">
							做任务
						</view>
					</view>
					<view class="both"></view>
				</view>
				<view  class="li">
					<view class="lef">
						完善个人信息
						<text>积分 +10</text>
					</view>
					<view class="rig">
						<view class="buton bun">
							做任务
						</view>
					</view>
					<view class="both"></view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				
			}
		},
		methods:{
			
		}

	}
</script>

<style scoped>
	.liven{
		width:210rpx;
		height:210rpx;
		background:rgba(255,255,255,1);
		display: inline-block;
		vertical-align: middle;
		margin-left: 30rpx;
		text-align: center;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(68,68,68,1);
		margin-top: 23rpx;
		position: relative;
	}
	.liven image{
		display: block;
		margin: auto;
	}
	.liven .clok{
		position: absolute;
		right: 0;
		top: 0;
		width: 65rpx;
	}
	.main{
		padding-top: 119rpx;
	}
	.main .h4{
		font-size:30rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(68,68,68,1);
		line-height:34rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 25rpx;
		padding-top: 25rpx;
	}
	.top .mo .cz{
		display: block;
		width:150rpx;
		height:150rpx;
		background:rgba(176,144,90,0.3);
		border-radius:75px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: -75rpx;
		text-align: center;
	}
	.top .mo .cz .border{
		width:127rpx;
		height:127rpx;
		background:rgba(172,138,81,1);
		border-radius:64rpx;
		display: inline-block;
		font-size:32rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 34rpx;
		margin-top: 12rpx;
	}
	.top .mo .cz .border .ps{
		font-size: 20rpx;
	}
		.top .mo .cz .border .h3{
			margin-top: 34rpx;
		}
	
	.both{
		display: block;
		clear: both;
	}
	.quer{
		background: #fff;
		padding-bottom: 45rpx;
		padding-top: 45rpx;
		display: flex;
		margin-bottom: 10rpx;
	}
	.quer .quer-l{
		flex: 1;
		border-right: 1px solid #E4E4E4;
		text-align: center;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(124,124,124,1);
	}
	.quer .quer-l:nth-child(2){
		border-right: 0;
	}
	.quer .quer-l view{
		font-size: 30rpx;
		color: #F0406F;
	}
	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		border-bottom: 1px solid #eee;
	}
.list .li .lef{
	float: left;
	width: 70%;
}
	.list .li .rig {
		display: inline-block;
		float: right;
	}
	.list .li text{
		display: block;
		font-size: 18rpx;
		color: #9D9D9D;
	}
		.list .li .rig .buton{
			width:102rpx;
			height:40rpx;
			background:rgba(240,64,111,1);
			border-radius:20rpx;
			font-size:20rpx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(255,255,255,1);
			text-align: center;
			line-height:40rpx ;
			margin-top: 15rpx;
		}
		.list .li .rig .bun{
			background:rgba(201,167,110,1);
		}
	.list .li .rig image {
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
	}

	.list .li .rig text {
		display: inline-block;
		vertical-align: middle;
	}
.list .li .bann{
	display: block;
	float: left;
	width:55rpx;
	height:55rpx;
	border-radius: 50%;
	margin-top: 5rpx;
	margin-right: 23rpx;
}
	uni-page-body {
		height: 100%;
	}

	.mons {
		height: 100%;
		background: #EEEEEE;
	
	}

	.top {
		position: relative;
	}

	.top .mo {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	margin: auto;
	text-align: center;
	padding-top: 75rpx;
	}
.top .mo  .box{
	width: calc(359rpx + 73rpx + 73rpx);
	margin: auto;
	margin-top: 30rpx;
	position: relative;
	display: flex;
}
.top .mo  .box .bs{
	display: block;
		width:360rpx;
		height:2rpx;
		background:rgba(255,255,255,1);
	display: inline-block;
	vertical-align: middle;
position: absolute;
margin: auto;
top: 35rpx;
right: 0;
left: 0;
}
.top .mo  .box .li{
	display: inline-block;
	vertical-align: middle;
	width: calc(73rpx + 71rpx);
	position: relative;
	z-index: 11;
	flex: 1;
	text-align: center;
	font-size:22rpx;
	font-family:Microsoft YaHei;
	font-weight:400;
	color:rgba(255,255,255,1);
	/* text-align: left; */
}
.top .mo  .box .actt{
	color: #BC9759;
}
.top .mo  .box .li:nth-child(4){
	width: 73rpx;
}
.top .mo  .box .li .bor{
	width:73rpx;
	height:73rpx;
	background:#040000;
	border-radius:50%;
	vertical-align: middle;
	margin: auto;
	margin-bottom: 10rpx;

}
.top .mo  .box .li .bor image{
	display: inline-block;
	width: 100%;
	margin: auto;
	/* margin-left: 9rpx; */
}
.top .mo  .box .li  .b{
	display: block;
	width:71rpx;
	height:2rpx;
	background:rgba(255,255,255,1);
display: inline-block;
vertical-align: middle;
margin-left: 9rpx;
}
	.top .bac {
		display: block;
		/* position: absolute;
		left: 0;
		top: 0; */
		width: 100%;
		height: 100%;
		z-index: 5;
	}

	.head {
		width: 86rpx;
		display: block;
		margin: auto;
	}

	.head image {
		display: block;
		width: 100%;
		margin: auto;
	}

	.name {
		text-align: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 17rpx;
	}
</style>
